<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 感觉就是写了一个小型的ssm -->
    <div id="app">
        <p>
            <router-link to="/">首页</router-link>
            <router-link to="/student">student</router-link>
            <router-link to="/teacher">teacher</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        const Welcome = { template : "<div>欢迎</div>" }
        const Student = { template : "<div>Student</div>" }
        const Teacher = { template : "<div>Teacher</div>" }

        const routes = [
            {path : '/', redirect : "/welcome"},
            {path : '/welcome', component : Welcome},
            {path : '/student', component : Student},
            {path : '/teacher', component : Teacher},
        ]

        const router = new VueRouter({routes:routes})

        const app = new Vue({
            el: "#app",
            router
        })

    </script>
</body>

</html>